import React, { Component,Fragment } from 'react';
import TodoItem from './TodoItem';
class TodoList extends Component {
    constructor(props) {
      super(props);
      this.state = {
        list:[],
        inputValue:''
      }
        this.handleIputChange=this.handleIputChange.bind(this);
        this.handleBtnClick=this.handleBtnClick.bind(this);
        this.handleDelete=this.handleDelete.bind(this)
    }
    handleBtnClick() {
      this.setState({
          list: [...this.state.list,this.state.inputValue],
          inputValue:''
      })
    }

    handleIputChange(e) {
      this.setState({
          inputValue:e.target.value
      })
    }

    handleDelete(index) {
        const list = [...this.state.list];
        list.splice(index,1);
        this.setState({
            list: list
        })
    }
    getTodoTime() {
      return (
          this.state.list.map((item,index) => {
              return <TodoItem
                  delete={this.handleDelete}
                  content={item}
                  key={index}
                  index={index}/>
          })
      )
    }

  render() {
    return (
      <Fragment>
        <div>
          <input value={this.state.inputValue} onChange={this.handleIputChange}/>
          <button onClick={ this.handleBtnClick } className='red-btn'>点击</button>
        </div>
        <ul>{ this.getTodoTime() }</ul>
      </Fragment>

    );
  }
}

export default TodoList;
